<template>
	<w-container id='colection' :loading='loading' class="bg-color-pageBg">
		<w-navbar :product="product" navType="goods" :bgColor="bgColor" :placeholder="false"></w-navbar>
		<!-- 主图部分 -->
		<w-product-details-card :product='product'></w-product-details-card>
		
		<view class="plr-16 ptb-12">
			<!-- 盲盒藏品 -->   
			<w-product-box :product='product'></w-product-box>
			<!-- 商品信息 -->
			<w-product-info-list class='mt-12' :product='product'></w-product-info-list>
			<!-- 商品介绍 -->
			<w-product-introduce class='mt-12' :product='product'></w-product-introduce>
			<!-- 购买须知 -->
			<w-product-buy-need class='mt-12' :product='product'></w-product-buy-need>
			<!-- 版权 -->
			<!-- <w-copyright></w-copyright>   -->
		</view>
		<!-- 按钮状态 -->
		<blindBox-detail-button :info="details" @refresh="getDetails"></blindBox-detail-button>
	</w-container>
</template>

<script>
	import { getUserCollectionDetails } from '@/api/collection/index.js';
	import blindBoxDetailButton from './components/blindBox-detail-button';
	import opacityMixin from '@/mixins/opacityNav.js'
	export default {
		components:{ blindBoxDetailButton },
		mixins:[opacityMixin],
		data() {
			return {
				loading: false,
				id: null,
				details:{},
				product: {
					goods_type:2,
					publisher:{}
				}
			};
		},
		onLoad({id}) {
			this.id = id;
			this.getDetails();
		},
		methods: {
			getDetails() {
				this.loading = true;
				getUserCollectionDetails(this.id).then(res=>{
					this.loading = false;
					let { product,types } = res.data;
					this.details = res.data;
					this.product = product;
					this.product.goods_type = types;
				}).catch(err=>{ this.loading = false; })
			}
		}
	}
</script>

<style lang="scss" scoped>
#colection{
	padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
}
</style>